// 可全局引入 变量
// .box{
//   span{
//     width: 150px;
//     height: 40px; 
//     line-height: 40px; 
//     float: left;  
//     color:$box-color;
//   }
//   div{
//     width: 200px;
//     height: 40px;
//     display: inline-block;
//     background-color: $box-background-color;
//   }
// }
// .flow{
//   width: 100%;
//   .cont{
//     color:$flow-color;
//   }
// }

// 响应式
// .pc{
//   width: 800px;
//   background: chartreuse;
//   height: 800px;
//   margin: auto;
// }
// .ipad{
//   width: 400px;
//   background: yellow;
//   height: 400px;
//   margin: auto;
// }
// .mobile{
//   width: 200px;
//   background: blue;
//   height: 200px;
//   margin: auto;
// }

.wrapper {
    display: flex;
    justify-content: center;
    width: 312px;
    overflow: hidden;
    margin: auto;
    .item{    
        flex-wrap: wrap;        
        width: 100px;
        height: 100px;
        // background-color: #42b983;
        color: #ffffff;
        float: left;
        margin:2px;     
        
    }
    .item1{
        background: url("~/static/img/backgroun.jpg") no-repeat 0 0;
    }
    .item2{
        background: url("~/static/img/backgroun.jpg") no-repeat -100px 0;
    }
    .item3{
        background: url("~/static/img/backgroun.jpg") no-repeat -200px 0;
    }
    .item4{
        background: url("~/static/img/backgroun.jpg") no-repeat  0 -100px;
    }
    .item5{
        background: url("~/static/img/backgroun.jpg") no-repeat -100px -100px;
    }
    .item6{
        background: url("~/static/img/backgroun.jpg") no-repeat  -200px -100px;
    }
    .item7{
        background: url("~/static/img/backgroun.jpg") no-repeat 0 -200px;
    }
    .item8{
        background: url("~/static/img/backgroun.jpg") no-repeat -100px -200px;
    }
    .item9{
        background: url("~/static/img/backgroun.jpg") no-repeat -200px -200px;
    }
    
}
